<template>
  <view class="container" v-if="isLoaded">
    <!-- 表单 -->
    <view class="content">
      <form class="l-form">
        <view class="l-form-item">
          <view class="l-lbl">类型:</view>
          <view class="l-form-right picker">
            <picker @change="bindPickerChange" :value="'value'" :range="remarkTypeEnum" :range-key="'text'" :disabled="mode == modeEnum.edit">
              <view>{{ remarkTypeEnum.find((item) => item.value == form.type).text }}</view>
            </picker>
          </view>
        </view>

        <view class="l-form-item">
          <view class="l-lbl">内容:</view>
          <view class="l-form-right l-form-input">
            <textarea class="l-textarea" v-model="form.content" :maxlength="50" />
          </view>
        </view>
      </form>
    </view>
    <!-- 编辑模式 -->
    <view class="bottom-btn-group" v-if="mode == modeEnum.edit">
      <view class="btn-del" @click="btnDelClick" size="mini">删除</view>
      <view class="btn-edit" @click="btnEditOrSaveSubmitClick" size="mini">保存</view>
    </view>
    <!-- 新增模式 -->
    <view class="bottom-add" v-else @click="btnEditOrSaveSubmitClick" size="mini">保存</view>
  </view>
</template>
<script>
import { GetFoodTagEdit, DelFoodTag, EditFoodTag } from '../../../common/api.js';
import { uShowLoading, uHideLoading, uNavigateTo, umodal, utoast, uSetNavigationBarTitle } from '../../../utils/uniUtils.js';
import checker from '../../../common/graceChecker';
import { remarkTypeEnum, modeEnum } from '../../../constants/normalConstants.js';
import { toastIconEnum } from '../../../constants/uiConstants.js';
import { corpId, storeId } from '../../../constants/apiConstants';
export default {
  async onLoad(options) {
    this.mode = options.mode == 'edit' ? 'edit' : 'add';
    this.type = options.type ?? 1;
    uSetNavigationBarTitle(options.mode == 'edit' ? '编辑常用备注' : '新增常用备注');

    if (this.mode == modeEnum.edit) {
      this.id = options.id;
    }
  },

  async mounted() {
    try {
      uShowLoading();
      // 编辑模式
      if (this.mode == modeEnum.edit) {
        await this.getData();
      } else {
        // 新增模式
        this.form = {
          type: this.type,
          content: '',
          corpId: corpId,
          storeId: storeId
        };
      }
    } catch (error) {
      console.log('error', error);
    } finally {
      this.isLoaded = true;
      uHideLoading();
    }
  },
  data() {
    return {
      modeEnum,
      mode: 'add', // 模式
      isLoaded: false,
      type: 1,
      remarkTypeEnum,
      id: null,
      form: null,
      rules: [
        {
          name: 'content',
          checkType: 'endNotNull',
          errorMsg: '内容不能为空~~'
        }
      ], //表单校验规则
      lock: false // 节流锁
    };
  },

  methods: {
    async getData() {
      const res = await GetFoodTagEdit(this.id);
      this.form = res.data;
    },
    async insertData() {
      return AddFoodTag(this.form);
    },
    async delData() {
      return await DelFoodTag(this.id);
    },
    async editData() {
      return await EditFoodTag(this.form);
    },

    bindPickerChange(e) {
      this.form.type = this.remarkTypeEnum[e.detail.value].value;
    },
    async btnDelClick() {
      const res = await umodal();
      // 确定删除
      if (res) {
        const result = await this.delData();
        console.log(result);
        if (result.code != null && result.code == 0) {
          await utoast('删除成功！', toastIconEnum.success);
          this.disabled = true;
          setTimeout(() => {
            uNavigateTo('/pages/workbench/remark/list');
          }, 1000);
        } else {
          await utoast('删除失败！', toastIconEnum.error);
        }
      }
    },
    //  编辑或新增
    async btnEditOrSaveSubmitClick() {
      if (this.lock) {
        return;
      }
      if (!(await umodal('确认要提交吗？'))) {
        return;
      }
      // 表单校验
      const isOk = checker.check(this.form, this.rules);
      if (!isOk) {
        await utoast(checker.error, toastIconEnum.none);
        return;
      }

      //  提交表单
      const res = this.mode == modeEnum.edit ? await this.editData(this.form) : await this.insertData(this.form);
      if (res?.code == 0) {
        await utoast('操作成功');
        setTimeout(() => {
          uNavigateTo('/pages/workbench/remark/list');
        }, 1000);
      } else {
        setTimeout(() => {
          this.lock = false;
          console.log('fail', this.lock);
        }, 2000);
      }
    }

    //方法放上面
  }
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
.container {
  .content {
    padding: 10px;
  }
}
</style>
